<template>
  <div class="nav">
    <!-- svg -->
    <svg width="32" height="32" viewBox="0 0 32 32" style="margin-top: 20px;margin-left:20px">
      <defs>
        <linearGradient x1="28.538%" y1="20.229%" x2="100%" y2="108.156%" id="logo-a">
          <stop stop-color="#A5B4FC" stop-opacity="0" offset="0%"></stop>
          <stop stop-color="#A5B4FC" offset="100%"></stop>
        </linearGradient>
        <linearGradient x1="88.638%" y1="29.267%" x2="22.42%" y2="100%" id="logo-b">
          <stop stop-color="#38BDF8" stop-opacity="0" offset="0%"></stop>
          <stop stop-color="#38BDF8" offset="100%"></stop>
        </linearGradient>
      </defs>
      <rect fill="#6366F1" width="32" height="32" rx="16"></rect>
      <path d="M18.277.16C26.035 1.267 32 7.938 32 16c0 8.837-7.163 16-16 16a15.937 15.937 0 01-10.426-3.863L18.277.161z"
        fill="#4F46E5"></path>
      <path d="M7.404 2.503l18.339 26.19A15.93 15.93 0 0116 32C7.163 32 0 24.837 0 16 0 10.327 2.952 5.344 7.404 2.503z"
        fill="url(#logo-a)"></path>
      <path d="M2.223 24.14L29.777 7.86A15.926 15.926 0 0132 16c0 8.837-7.163 16-16 16-5.864 0-10.991-3.154-13.777-7.86z"
        fill="url(#logo-b)"></path>
    </svg>

    <ul style="margin-top: 50px;margin-left:20px">
      <li style="color:#677489;font-size:12px;font-weight:bold">
        导航
      </li>

      <li class="flex items-center space-x-2" @click="() => $router.push('/').catch(err => { })"
        style="cursor: pointer;color:#E3E8EF;font-size:15px;font-weight:bolder;margin-top:30px;margin-left:20px">
        <!-- 首页的svg -->
        <span>
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-house"
            viewBox="0 0 16 16">
            <path
              d="M8.707 1.5a1 1 0 0 0-1.414 0L.646 8.146a.5.5 0 0 0 .708.708L2 8.207V13.5A1.5 1.5 0 0 0 3.5 15h9a1.5 1.5 0 0 0 1.5-1.5V8.207l.646.647a.5.5 0 0 0 .708-.708L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.707 1.5ZM13 7.207V13.5a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5V7.207l5-5 5 5Z" />
          </svg>
          </i>
        </span>
        <span style="margin-left: 20px;">门户首页</span>
      </li>


      <li class="flex items-center space-x-2" @click="() => $router.push('/vindicate').catch(err => { })"
        style="cursor: pointer;color:#E3E8EF;font-size:15px;font-weight:bold;margin-top:30px;margin-left:20px">
        <!-- 的svg -->
        <span><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
            class="bi bi-calendar2-heart" viewBox="0 0 16 16">
            <path fill-rule="evenodd"
              d="M4 .5a.5.5 0 0 0-1 0V1H2a2 2 0 0 0-2 2v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2h-1V.5a.5.5 0 0 0-1 0V1H4V.5ZM1 3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v11a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V3Zm2 .5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h10a.5.5 0 0 0 .5-.5V4a.5.5 0 0 0-.5-.5H3Zm5 4.493c1.664-1.711 5.825 1.283 0 5.132-5.825-3.85-1.664-6.843 0-5.132Z" />
          </svg>
        </span>
        <span style="margin-left: 20px;">我要表白</span>
      </li>

      <!-- 下面是订单列表 -->

      <li class="flex items-center space-x-2" @click="() => $router.push('/wall').catch(err => { })"
        style="cursor: pointer;color:#E3E8EF;font-size:15px;font-weight:bold;margin-top:30px;margin-left:20px">
        <!-- 首页的svg -->
        <span>
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-bricks"
            viewBox="0 0 16 16">
            <path
              d="M0 .5A.5.5 0 0 1 .5 0h15a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-.5.5H14v2h1.5a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-.5.5H14v2h1.5a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-.5.5H.5a.5.5 0 0 1-.5-.5v-3a.5.5 0 0 1 .5-.5H2v-2H.5a.5.5 0 0 1-.5-.5v-3A.5.5 0 0 1 .5 6H2V4H.5a.5.5 0 0 1-.5-.5v-3zM3 4v2h4.5V4H3zm5.5 0v2H13V4H8.5zM3 10v2h4.5v-2H3zm5.5 0v2H13v-2H8.5zM1 1v2h3.5V1H1zm4.5 0v2h5V1h-5zm6 0v2H15V1h-3.5zM1 7v2h3.5V7H1zm4.5 0v2h5V7h-5zm6 0v2H15V7h-3.5zM1 13v2h3.5v-2H1zm4.5 0v2h5v-2h-5zm6 0v2H15v-2h-3.5z" />
          </svg>
        </span>
        <span style="margin-left: 20px;">表白墙</span>
      </li>

      <!-- 下面是商家列表 -->

      <li class="flex items-center space-x-2" @click="() => $router.push('/search').catch(err => { })"
        style="cursor: pointer;color:#E3E8EF;font-size:15px;font-weight:bold;margin-top:30px;margin-left:20px">
        <!-- 首页的svg -->
        <span>
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search-heart"
            viewBox="0 0 16 16">
            <path d="M6.5 4.482c1.664-1.673 5.825 1.254 0 5.018-5.825-3.764-1.664-6.69 0-5.018Z" />
            <path
              d="M13 6.5a6.471 6.471 0 0 1-1.258 3.844c.04.03.078.062.115.098l3.85 3.85a1 1 0 0 1-1.414 1.415l-3.85-3.85a1.007 1.007 0 0 1-.1-.115h.002A6.5 6.5 0 1 1 13 6.5ZM6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11Z" />
          </svg>
        </span>
        <span style="margin-left: 20px;">搜索</span>
      </li>

      <li class="flex items-center space-x-2" @click="() => $router.push('/person').catch(err => { })"
        style="cursor: pointer;color:#E3E8EF;font-size:15px;font-weight:bold;margin-top:30px;margin-left:20px">
        <!-- 首页的svg -->
        <span>
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-person"
            viewBox="0 0 16 16">
            <path
              d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0Zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4Zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10Z" />
          </svg>
        </span>
        <span style="margin-left: 20px;">个人中心</span>
      </li>
    </ul>

  </div>
</template>

<script>
export default {
  name: "sidebar",
  data() {
    return {
      isGoodsSubmenuOpen: false,
      isOrderSubmenuOpen: false,
      isSupplierSubmenuOpen: false,
      isUserSubmenuOpen: false
    }
  },
  methods: {
  }
}
</script>

<style scoped>
.nav {
  width: 18%;
  float: left;
  background-color: #fa5c7c !important;
  height: 100vh;
  color: #fff;
  font-weight: bolder;
  color: #fff;
  -webkit-user-select: none;
  /*webkit浏览器*/
  -khtml-user-select: none;
  /*早期浏览器*/
  -moz-user-select: none;
  /*火狐*/
  -ms-user-select: none;
  /*IE10*/
  user-select: none;
}

.nav ul {
  margin-left: 5px;
  margin-right: 10px;
  margin-top: 50px;
  color: #fff;
}

* {
  font-weight: bolder;
}
</style>